<!-- AI告警督办-列表页（首页） -->
<template>
  <view class="index-all">
    <view class="search-info">
      <view class="search-view">
        <view @click="openPicker" class="search-view-left" :class="{w_100:warningInfo.stateTag!='FX'}">
          <image src="@/static/image/index/lawicon3.png" class="search-view-img"/>
          <uv-input v-model="queryForm.warningArea" border="none" placeholder="摄像头位置" readonly  suffixIcon="arrow-down"></uv-input>
        </view>
        <view class="znfx-btn" v-if="warningInfo.stateTag=='FX'">
          <uv-button :hairline="true" :plain="true" type="success" color="#3775F6" @click="goIntelligentAnalysis">
            智能分析
          </uv-button>
        </view>
      </view>
    </view>
    <view class="warning-info">
      <view class="title"><image :src="imgMinioPath + '/pco/tit-icon1.png'" class="s-title-bg"></image>预警信息</view>
      <view class="row">
        <view class="w32">学校名称：</view>
        <view class="text-right">{{ warningInfo.rectificationAlarm ? warningInfo.rectificationAlarm.schoolName : '--' }}</view>
      </view>
			<view class="row">
        <view class="w32">食堂名称：</view>
        <view class="text-right">{{ warningInfo.orgName }}</view>
      </view>
			<view class="row">
        <view class="w32">食安管理人员：</view>
        <view class="text-right">{{ warningInfo.leader }}</view>
      </view>
      <view class="row">
        <view class="w32">联系电话：</view>
        <view class="text-right">{{ warningInfo.phone }}</view>
      </view>
			<view class="row">
				<view class="w32">预警日期：</view>
				<view class="text-right">{{ warningInfo.warningDate ? dayjs(warningInfo.warningDate).format('YYYY-MM-DD') : '' }}</view>
			</view>
      <view class="row">
        <view class="w32">预警类型：</view>
        <view class="text-right">{{ stateTagFormatter(warningInfo.stateTag)||'--' }}</view>
      </view>

    </view>
    <view class="warning-info">
      <view class="title">
        <view><image :src="imgMinioPath + '/pco/tit-icon1.png'" class="s-title-bg"></image>AI轨迹分析</view>
      </view>
      <view class="image-swiper">
        <uv-swiper :list="fileList" height="200px" indicator indicatorMode="line" circular
                   @click='swiperClick'
                   @change="e => currentDot = e.current" >
          <template v-slot:indicator>
            <view class="indicator">
              <view class="indicator__dot"
                    v-for="(item, index) in fileList"
                    :key="index"
                    :class="[index === currentDot && 'indicator__dot--active']"
              ></view>
            </view>
          </template>
        </uv-swiper>
      </view>
      <template v-if="warningInfo.video">
        <view class="title">
          <view><image :src="imgMinioPath + '/pco/tit-icon1.png'" class="s-title-bg"></image>预警视频</view>
        </view>
        <view class="row video-flex">
          <video class="video" :src="aiImgMinioPath + warningInfo.video" controls="controls"></video>
        </view>
      </template>
    </view>
    <template v-if="warningInfo.state =='2'">
      <view class="warning-info">
        <view class="title"><image :src="imgMinioPath + '/pco/tit-icon1.png'" class="s-title-bg"></image>整改信息</view>
        <view class="row">
          <view class="w23">整改详情：</view>
          <view class="zgxx-text-right">{{ warningInfo.rectificationSituation ? warningInfo.rectificationSituation : '--'  }}</view>
        </view>
        <view class="row">
          <view class="w23">整改照片：</view>
          <view class="zgxx-text-right">
            <fileView v-if="warningInfo.id" :tableId="warningInfo.id" tableName="b_rectification_info" type="photo"></fileView>
            <text v-else>--</text>
          </view>
        </view>
        <view class="row">
          <view class="w32">整改时间：</view>
          <view class="zgxx-text-right">{{ warningInfo.finishTime ? dayjs(warningInfo.finishTime).format('YYYY-MM-DD HH:mm:ss') : '--' }}</view>
        </view>
        <view class="row">
          <view class="w32">处理人：</view>
          <view class="zgxx-text-right">{{ warningInfo.handleUserName ? warningInfo.handleUserName : '--' }}</view>
        </view>
      </view>
    </template>
    <template v-else>
      <view class="warning-info">
        <view class="title"><image :src="imgMinioPath + '/pco/tit-icon1.png'" class="s-title-bg"></image>整改信息</view>
        <view class="noData">
          <image :src="imgMinioPath + '/pco/zgzwsj.png'" class="s-title-bg"></image>
        </view>
      </view>
    </template>
    <uv-picker ref="schoolPicker" :columns="[warningAreaList]" key-name="label" title="摄像头位置"
               @confirm="schoolConfirm"></uv-picker>

  </view>
</template>

<script setup>
import dayjs from "dayjs";
const {proxy} = getCurrentInstance();
const emits = defineEmits(['complete'])
import config from '@/common/config';
import {ref} from "vue";
import api from "@/api/pco/alarm/alarmInfo.js";
import warningRectificationApi from "@/api/pco/warningRectification/warningRectification";
let imgMinioPath = ref(config.IMG_MINIO_PATH);
import {stateTagFormatter} from "@/utils/formValidate";
let userInfo = ref(uni.getStorageSync('userInfo'));
// let imgMinioPath = ref(config.IMG_MINIO_PATH.replace("/schoolWeb",""));
let aiImgMinioPath = ref(config.AI_IMG_MINIO_PATH);
let warningInfo = ref({});
let props = defineProps({
  id: {
    type: String,
    default: () => {
      return "";
    }
  }
});
let currentDot = ref(0);
let fileList = ref([]);
let queryForm = reactive({
  rectificationId: '',
  warningArea: '',
});
const warningAreaList = ref([])

let getalarmAreaInfo = (callback) => {
  proxy.http.get(api.alarmAreaInfoQuery(props.id)).then(res => {
    if(res.code === 0) {
      warningAreaList.value= res.data;
      if(warningAreaList.value.length>0){
        queryForm.rectificationId = warningAreaList.value[0].id
        queryForm.warningArea = warningAreaList.value[0].label
      }
      callback()
    }
  })
};
const schoolPicker = ref(null)
let schoolConfirm = (e) => {
  if (e.value[0].id) {
    queryForm.rectificationId = e.value[0].id
    queryForm.warningArea = e.value[0].label
  } else {
    queryForm.rectificationId = "";
    queryForm.warningArea = "";
  }
  getAlarmAreaDetailInfo();
}
let openPicker = () => {
  schoolPicker.value.open();
}
//点击图片预览
let swiperClick = (e) => {
	let lists = fileList.value;
	uni.previewImage({
	  urls: lists.map((item) => item.url ),
	  current: e,
	});
};
let goIntelligentAnalysis = () => {
  uni.navigateTo({
    url: '/packagePcoCheck/pages/alarmInfo/IntelligentAnalysis?id=' + queryForm.rectificationId,
  });
}
  let imageUrl = (imagePath) => {
    return imgMinioPath.value + imagePath;
  }

  let picturePreview = (imagePath) => {
    uni.previewImage({
      urls: [imageUrl(imagePath)],
      current: imageUrl(imagePath)
    })
  }
  let getAlarmAreaDetailInfo = () => {
    proxy.http.get(warningRectificationApi.warningRectificationQuery(queryForm.rectificationId)).then(res => {
      if (res.code === 0) {
          warningInfo.value = { ...res.data}
				console.log(' warningInfo.value warningInfo.value',warningInfo.value);
				fileList.value=[
            {url:imgMinioPath.value.replace("/schoolWeb","") + warningInfo.value.trackImage},
            {url: aiImgMinioPath.value + warningInfo.value.rectificationImgs[0]},
            {url: aiImgMinioPath.value + warningInfo.value.rectificationImgs[1]}
          ]
       };
    })
}
let goBack = (e) => {
  uni.navigateBack();
};
onMounted(() => {
  getalarmAreaInfo(() => {
    getAlarmAreaDetailInfo();
  })
})


</script>

<style lang="scss" scoped >
.index-all{
  width: 100vw;
  background: #f6f6f6;
}

.top-tab{
  margin: 20rpx 20rpx 20rpx;
  display: flex;
  justify-content: space-between;
}

.history-button{
  color: #0256FF;
  font-weight: 500
}

.warning-info {
  background: #fff;
  margin: 20rpx 16rpx 20rpx;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  padding:30rpx 20rpx;
  position: relative;
  .indicator__dot{
    width: 16rpx;
    height: 16rpx;
    border-radius: 16rpx;
    background:#8B8B8B;
    margin: 0 5rpx;
  }
  .indicator__dot--active{
    width: 32rpx;
    background: #3775F6;
  }
  .indicator{
    display: flex;
  }
  .title{
    padding-left: 40rpx;
    font-size: 32rpx;
    font-weight: 600;
    line-height: 24px;
    color: #252527;
    position: relative;
    margin-bottom: 24rpx;
    .left{
      position: relative;
      padding-left: 40rpx;
    }
    .s-title-bg{
      width: 120px;
      height: 14px;
      position: absolute;
      left: 0;
      bottom:5px;
    }
  }

  ::v-deep .uv-collapse-item__content__text {
    padding: 12px 13px;

  }
  .search-view {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .row {
    color: #3D3D3D;
    margin-bottom: 16rpx;
    display: flex;
    justify-content: space-between;
    padding: 0px 24rpx;
    font-size: 28rpx;
    &:last-child {
      margin-bottom: 0;
    }
    .w32 {
      color: #8B8B8B!important;
      width: 32%;
    }
    .w23 {
      color: #8B8B8B!important;
      width: 23%;
    }
    .w70 {
      color: #8B8B8B!important;
    }
    image {
      height: 200px;
      width: 100%;
    }
    video{
      height: 200px;
      width: 100%;
    }
  }
  .analysis {
    color: blue;
  }
  .video-flex{
    display: flex;
    justify-content: center;

  }
  .flex-button{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 0;
  }

  .noData {
    height: 250rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    image {
      width: 200rpx;
      height: 220rpx;
    }
  }
}
.item {
  background: #fff;
  margin: 0;
  border-radius: 0;
  display: flex;
  padding: 0;
  flex-direction: column;

  .top-label {
    color: rgba(0, 0, 0, 0.9);
    font-size: 32rpx;
    font-weight: 500;
    margin-left: 10rpx;
    margin-bottom: 15rpx;
    margin-top: 15rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    & > .text {
      font-size: var(--uni-font-size-16);
      & > text {
        padding-left: 5rpx;
        color: var(--uni-text-color-red);
      }
    }
  }
  .item-child{
    border-top: 2rpx dashed #D8D8D8;
  }
  .info {
    flex: 1;
    margin-left: 10rpx;
    font-size: 28rpx;
    flex-direction: column;
    height: 100%;
    display: flex;

    .row {
      display: flex;
      flex: 1;
      line-height: 50rpx;

      &.sign {
        height: 70rpx;
        line-height: 70rpx;
        margin-top: 20rpx;
      }

      .title1 {
        color: #888;
        // width: 120rpx;
      }

      .con {
        color: #3d3d3d;
        flex: 1;
        text-align: right;
        overflow: hidden;
        //text-overflow: ellipsis;
        //white-space: nowrap;
      }
      .annotation {
        color: #3375f6;
        flex: 1;
        text-align: right;
        font-size: 28rpx;
      }
      .annotation-right {
        color: #3375f6;
        flex: 1;
        text-align: right;
        display: flex;
        justify-content: flex-end;
        grid-gap: 20rpx;
      }
    }
  }
}
.check-all {
  display: flex;
  width: 110%;
  align-items: center;
}
.image-swiper{
  margin-bottom: 40rpx;
}
.text-right {
  text-align: right;
}
.search-info {
  margin: 20rpx 20rpx 0rpx;
  display: flex;
  flex-direction: column;
  /*padding: 20rpx;*/
  position: relative;

  .search-view {
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-left {
      width: 79%;
      height: 64rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      border-radius: 40rpx;
      padding-right: 20rpx;
      .search-view-img {
        margin: 0 0 0 30rpx;
        width: 36rpx;
        height: 36rpx;
      }
    }
  }
  .w_100{
    width: 100%;
  }
  ::v-deep .uv-input {
    border: none;
    /*color: #BDBDBD!important;*/
  }
  /*::v-deep .uni-input-input {*/
  /*  color: #BDBDBD!important;*/
  /*}*/
  ::v-deep .uv-icon__icon {
    color: #BDBDBD!important;
  }
}
.text-right {
  text-align: right;
  width: 68%;
}
.zgxx-text-right {
  text-align: right;
  width: 77%;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0 10rpx;
}
::v-deep .image-box {
  margin-bottom: 16rpx;
}
::v-deep .image-box-flex {
  justify-content:end;
}
::v-deep .image-box uni-image {
  margin-right: 0;
}
</style>